<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>AI象棋</title>
    <link rel="stylesheet" href="{{ url_for('static', path='css/app.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', path='css/chinese_chess.css') }}">
</head>
<body>
<div id="game-box">
    <div id="chess-board">
        <span id="rr1" class="piece" data-x="-1" data-y="-1" data-status="down" data-color="red" data-name="俥" data-id="rook"></span>
        <span id="rn1" class="piece" data-x="-1" data-y="-1" data-status="down" data-color="red" data-name="傌" data-id="knight"></span>
        <span id="rb1" class="piece" data-x="-1" data-y="-1" data-status="down" data-color="red" data-name="相" data-id="bishop"></span>
        <span id="rq1" class="piece" data-x="-1" data-y="-1" data-status="down" data-color="red" data-name="仕" data-id="advisor"></span>
        <span id="rk1" class="piece" data-x="-1" data-y="-1" data-status="down" data-color="red" data-name="帥" data-id="king"></span>
        <span id="rq2" class="piece" data-x="-1" data-y="-1" data-status="down" data-color="red" data-name="仕" data-id="advisor"></span>
        <span id="rb2" class="piece" data-x="-1" data-y="-1" data-status="down" data-color="red" data-name="相" data-id="bishop"></span>
        <span id="rn2" class="piece" data-x="-1" data-y="-1" data-status="down" data-color="red" data-name="傌" data-id="knight"></span>
        <span id="rr2" class="piece" data-x="-1" data-y="-1" data-status="down" data-color="red" data-name="俥" data-id="rook"></span>
        <span id="rc1" class="piece" data-x="-1" data-y="-1" data-status="down" data-color="red" data-name="炮" data-id="cannon"></span>
        <span id="rc2" class="piece" data-x="-1" data-y="-1" data-status="down" data-color="red" data-name="炮" data-id="cannon"></span>
        <span id="rp1" class="piece" data-x="-1" data-y="-1" data-status="down" data-color="red" data-name="兵" data-id="pawn"></span>
        <span id="rp2" class="piece" data-x="-1" data-y="-1" data-status="down" data-color="red" data-name="兵" data-id="pawn"></span>
        <span id="rp3" class="piece" data-x="-1" data-y="-1" data-status="down" data-color="red" data-name="兵" data-id="pawn"></span>
        <span id="rp4" class="piece" data-x="-1" data-y="-1" data-status="down" data-color="red" data-name="兵" data-id="pawn"></span>
        <span id="rp5" class="piece" data-x="-1" data-y="-1" data-status="down" data-color="red" data-name="兵" data-id="pawn"></span>

        <span id="br1" class="piece" data-x="-1" data-y="-1" data-status="down" data-color="black" data-name="車" data-id="rook"></span>
        <span id="bn1" class="piece" data-x="-1" data-y="-1" data-status="down" data-color="black" data-name="馬" data-id="knight"></span>
        <span id="bb1" class="piece" data-x="-1" data-y="-1" data-status="down" data-color="black" data-name="象" data-id="bishop"></span>
        <span id="bq1" class="piece" data-x="-1" data-y="-1" data-status="down" data-color="black" data-name="仕" data-id="advisor"></span>
        <span id="bk1" class="piece" data-x="-1" data-y="-1" data-status="down" data-color="black" data-name="將" data-id="king"></span>
        <span id="bq2" class="piece" data-x="-1" data-y="-1" data-status="down" data-color="black" data-name="仕" data-id="advisor"></span>
        <span id="bb2" class="piece" data-x="-1" data-y="-1" data-status="down" data-color="black" data-name="象" data-id="bishop"></span>
        <span id="bn2" class="piece" data-x="-1" data-y="-1" data-status="down" data-color="black" data-name="馬" data-id="knight"></span>
        <span id="br2" class="piece" data-x="-1" data-y="-1" data-status="down" data-color="black" data-name="車" data-id="rook"></span>
        <span id="bc1" class="piece" data-x="-1" data-y="-1" data-status="down" data-color="black" data-name="砲" data-id="cannon"></span>
        <span id="bc2" class="piece" data-x="-1" data-y="-1" data-status="down" data-color="black" data-name="砲" data-id="cannon"></span>
        <span id="bp1" class="piece" data-x="-1" data-y="-1" data-status="down" data-color="black" data-name="卒" data-id="pawn"></span>
        <span id="bp2" class="piece" data-x="-1" data-y="-1" data-status="down" data-color="black" data-name="卒" data-id="pawn"></span>
        <span id="bp3" class="piece" data-x="-1" data-y="-1" data-status="down" data-color="black" data-name="卒" data-id="pawn"></span>
        <span id="bp4" class="piece" data-x="-1" data-y="-1" data-status="down" data-color="black" data-name="卒" data-id="pawn"></span>
        <span id="bp5" class="piece" data-x="-1" data-y="-1" data-status="down" data-color="black" data-name="卒" data-id="pawn"></span>
    </div>
</div>
<div id="chat-box">
    <div class="header">
        <span class="user-name">Deepseek</span>
        <span class="avatar"><img src="{{ url_for('static', path='images/avatar.svg') }}"></span>
    </div>
    <div class="content">
        <div class="chat-item ai">
            <span class="avatar"><img src="{{ url_for('static', path='images/avatar.svg') }}"></span>
            <div class="message">
                <span class="text">欢迎来到AI象棋，DeepSeek将与您对弈。请选择你喜欢的颜色。</span>
            </div>
        </div>
        <div class="chat-item selector">
            <div class="button select-color" data-color="red" style="color: #BE4646;">红方(先手)</div>
            <div class="button select-color" data-color="black" style="color: #333;">黑方(后手)</div>
        </div>
    </div>
    <div class="footer">
        <div class="undo">悔棋</div>
        <div class="restart">重新开始</div>
    </div>
</div>
<script src="{{ url_for('static', path='libs/jquery-3.7.1.min.js') }}"></script>
<script>
    let chatHistory = [];
    let moveRecord = [];

    let turnToMove = 'red';
    let userHolderColor = null;

    const boardWidth = 1040;
    const boardHeight = 1140;
    const boardPadding = 120;
    const unitSize = 100;
    const pieceList = [
        ['rr1', 0, 0],
        ['rn1', 1, 0],
        ['rb1', 2, 0],
        ['rq1', 3, 0],
        ['rk1', 4, 0],
        ['rq2', 5, 0],
        ['rb2', 6, 0],
        ['rn2', 7, 0],
        ['rr2', 8, 0],
        ['rc1', 1, 2],
        ['rc2', 7, 2],
        ['rp1', 0, 3],
        ['rp2', 2, 3],
        ['rp3', 4, 3],
        ['rp4', 6, 3],
        ['rp5', 8, 3],
        ['br1', 0, 9],
        ['bn1', 1, 9],
        ['bb1', 2, 9],
        ['bq1', 3, 9],
        ['bk1', 4, 9],
        ['bq2', 5, 9],
        ['bb2', 6, 9],
        ['bn2', 7, 9],
        ['br2', 8, 9],
        ['bc1', 1, 7],
        ['bc2', 7, 7],
        ['bp1', 0, 6],
        ['bp2', 2, 6],
        ['bp3', 4, 6],
        ['bp4', 6, 6],
        ['bp5', 8, 6],
    ];
</script>
<script src="{{ url_for('static', path='js/chinese_chess_helper.js') }}"></script>
<script src="{{ url_for('static', path='js/chat_helper.js') }}"></script>
<script src="{{ url_for('static', path='js/chinese_chess.js') }}"></script>
</body>
</html>